<template>
  <basic :field="field">
    <template slot="fieldProps">
      <FormItem label="输入框类型">
        <Select v-model="fieldProps.type" @on-change="handleChange('type')">
          <Option
            v-for="option in typeOptions"
            :value="option.value"
            :key="option.value"
          >{{option.label}}</Option>
        </Select>
      </FormItem>

      <FormItem v-if="fieldProps.type === 'text'" label="验证格式">
        <Select v-model="fieldProps.validateType" @on-change="handleValidateTypeChange">
          <Option v-for="j in validateTypeList" :value="j.type" :key="j.type">{{j.name}}</Option>
        </Select>
      </FormItem>
      <FormItem
        v-show="fieldProps.type === 'text' && fieldProps.validateType != 'none'"
        label="正则表达式"
      >
        <Input
          :readonly="!customRegExp"
          v-model="fieldProps.regexp"
          @on-change="handleChange('regexp')"
        />
      </FormItem>

      <FormItem
        v-show="fieldProps.type === 'text' && fieldProps.validateType === 'custom'"
        label="错误信息"
      >
        <Input v-model="fieldProps.errMessage" @on-change="handleChange('regexp')"/>
      </FormItem>
    </template>
  </basic>
</template>

<script>
import basic from './basic.vue';
import Emitter from '../../../../mixins/emitter';

export default {
  name: 'fieldInput',
  components: {
    basic
  },
  mixins: [Emitter],
  props: {
    field: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      customRegExp: false,
      fieldProps: {
        regexp: '',
        type: 'text',
        validateType: 'none',
        errMessage: ''
      },
      typeOptions: [
        { value: 'text', label: '单行文本' },
        { value: 'password', label: '密码' },
        { value: 'textarea', label: '多行文本' },
        { value: 'url', label: '网址' },
        { value: 'email', label: '邮箱' },
        { value: 'date', label: '日期' }
      ],
      validateTypeList: [
        {
          type: 'none',
          name: '任意格式'
        }, // 任意格式
        {
          type: 'mobile',
          name: '手机号',
          rule:
            '^((13[0-9])|(15[^4])|(166)|(17[0-8])|(18[0-9])|(19[8-9])|(147,145))\\d{8}$'
        }, // 手机号
        {
          type: 'idcard',
          name: '身份证',
          rule: '/^(\\s)*(\\d{15}|\\d{18}|\\d{17}x)(\\s)*$'
        }, // 身份证
        {
          type: 'chinese',
          name: '中文',
          rule: '/^[\\\x4E00-\\\x9FA5\\\xF900-\\\xFA2D]+'
        }, // 中文
        { type: 'english', name: '英文字母', rule: '^[A-Za-z]+$' }, // 英文字母
        {
          type: 'url',
          name: '链接地址',
          rule:
            '^^(https|http|ftp|rtsp|mms):\\/\\/[A-Za-z0-9]+\\.[A-Za-z0-9]+[\\/=\\?%\\-&_~`@[\\]\\\':+!]*([^<>\\"\\"])*$'
        }, // 链接地址
        {
          type: 'tel',
          name: '固定电话',
          rule:
            '(^(0d{2})-(d{8})$)|(^(0d{3})-(d{7})$)|(^(0d{2})-(d{8})-(d+)$)|(^(0d{3})-(d{7})-(d+)$)'
        }, // 固定电话
        {
          type: 'email',
          name: '邮箱地址',
          rule: '^\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*$'
        }, // 邮箱地址
        {
          type: 'custom',
          name: '自定义',
          rule: ''
        } // 自定义
      ]
    };
  },
  methods: {
    handleChange(name) {
      let field = {};
      switch (name) {
        case 'regexp':
          field = {
            name: 'pattern',
            validate: {
              pattern: this.fieldProps.regexp,
              message: this.fieldProps.errMessage
            }
          };
          break;
        case 'type':
          if (this.fieldProps.type != 'text') {
            this.customRegExp = false;
            this.fieldProps.regexp = '';
            this.fieldProps.validateType = 'none';
          }
          field = { props: { type: this.fieldProps.type } };
          break;
      }
      this.dispatch('formFieldsSetting', 'on-change-field', field);
    },
    handleValidateTypeChange() {
      if (this.fieldProps.validateType == 'custom') {
        this.customRegExp = true;
        this.fieldProps.regexp = '';
      } else {
        this.fieldProps.regexp = this.validateTypeList.find(v => v.type === this.fieldProps.validateType).rule;
      }
      this.handleChange('regexp');
    },
    init() {
      const validate = this.field.validate.find(v => v.pattern);
      this.fieldProps.regexp = validate ? validate.pattern : '';
      this.fieldProps.type = this.field.props.type || 'text';
      const defaultOption = this.validateTypeList.find(v => v.rule == this.fieldProps.regexp);

      this.fieldProps.validateType =
        this.fieldProps.regexp && defaultOption
          ? defaultOption.type
          : this.fieldProps.regexp
          ? 'custom'
          : 'none';

      this.customRegExp = this.fieldProps.validateType === 'custom';
      this.fieldProps.errMessage = validate ? validate.message : '';
    }
  },
  created() {
    this.init();
  },
  watch: {
    field: {
      handler() {
        this.init();
      },
      deep: true
    }
  }
};
</script>
